<template>
<div class="box">
    <div class="box-header">
        <span class="title">{{title}}</span>
    </div>
    <div class="box-body">
        <div class="chart fullsize" id="chart-eff2-capacity"></div>
    </div>
    <dl-Capacity ref="dialog" :show="showModal" :take="modalData"></dl-Capacity>
</div>
</template>

<script>
import echarts from 'echarts'
import Loading from '@/components/Loading'
import bus from '@/utils/bus'
import axios from 'axios'
import dlCapacity from '@/view/eff2/dl-Capacity'

export default {
    name: '',
    data() {
        return {
            startTime: null,
            depName: null,
            option: null,
            showLoading: false,
            chartInstance:null,
            showModal:false,
            modalData:{}
        }
    },
    props: {
        title: String
    },
    components: {
        'x-loading': Loading,
        'dl-Capacity':dlCapacity
    },
    methods: {
        renderChart() {
            this.showLoading = true
            var gain = 0.9;
            var myColor = ['#e63810', '#ff6b00', '#e3b61f', '#13b5b1'];
            var myBgColor = ['rgba(230,56,16,0.2)', 'rgba(255,107,0,0.2)', 'rgba(227,182,31,0.2)', 'rgba(19,181,177,0.2)'];

            this.option = {
                grid: { left: '3%', top: '10%', right: '2%', bottom: '5%', containLabel: true },

                yAxis: [{ type: 'category', axisTick: { show: false }, axisLine: { lineStyle: { color: 'rgba(160,160,160,0.3)', } }, axisLabel: { textStyle: { color: 'e63810', fontSize: 12, } }, data: [] }, { type: 'category', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: false }, splitLine: { show: false }, data: [] }],

                xAxis: { type: 'value', name: '业务能力指数', nameGap: 35, nameTextStyle: { color: '#ffffff', fontSize: 12, }, axisTick: { show: false }, axisLine: { show: false }, splitLine: { lineStyle: { color: 'rgba(160,160,160,0.3)', } }, axisLabel: { textStyle: { color: 'rgba(255,255,255,0.8)', fontSize: 12, } } },
                series: [{
                        type: 'bar',
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                show: true,
                                color:'rgba(230,56,16,0.2)',
                                barBorderRadius: 50
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        barWidth: '45%',
                        data: []
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#e63810',
                                barBorderRadius: 50,
                                borderWidth: 0,
                                borderColor: '#333',
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter:'{c}分',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                    
                                }
                            }
                        },
                        barWidth: '45%',
                        data: []
                    }
                ]
            };
            let params = {
                GroupName:this.depName,
                startTime:this.startTime
            }
            axios.get(this.URLHEAD_DVS + 'GetBusinessAbilityDataByDepartmentName',{params:params}).then(res=>{
                let json = res.data
                json.Data = json.Data.reverse();
                this.option.yAxis[0].data = json.Data.map(o=>{
                    return o.userName
                })
                this.option.yAxis[1].data = json.Data.map(o=>{
                    return o.userName
                })
                this.option.series[0].data = json.Data.map(o=>{
                    return 100
                })
                this.option.series[1].data = json.Data.map(o=>{
                    return {name:o.userName,value:o.score,rank:o.ranking}
                })
                this.chartInstance = this.$Crender('chart-eff2-capacity',this.option);
                var $this = this;
                this.chartInstance.on('click',(params)=>{
                    
                    $this.modalData = {
                        name:params.data.name,
                        date:$this.startTime,
                        groupName:$this.depName,
                        score:params.data.value,
                        rank:params.data.rank
                    }
                    $this.showModal = true;
                })
                this.showLoading = false
            })
        }
    },
    mounted() {
        bus.$on("eff-select-dep", msg => {
            this.depName = msg.depName;
            this.startTime = msg.startTime;
            this.renderChart();
        });
    },
}
</script>

<style lang="" scoped>

</style>
